<!--时间是根据系统时间自动添加的-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图书管理系统</title>
	<link href="css/Vue图书管理系统.css" rel="stylesheet">
	<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<form action="">
		<h3 class="tittle">简易图书管理</h3>
		<div class="operationL">
			<div class="adds">
				<label v-for="(i,key) in adds">
					{{i}}:<input v-model="addsSet[key]" :name="i" class="input" :placeholder="'请输入'+i">
				</label>
				<label>
					<input @click="addF" type="button" class="operation operationInput" value="添加">
				</label>
			</div>
			<div class="search">
				<label>
					请输入搜索关键字：<input class="input" placeholder="请输入搜索关键字" v-model="searchName">
					<input type="button" class="operation operationInput" value="搜索" @click="search(searchName)">
				</label>
			</div>
		</div>
		<table :style="{'table-layout':tableInEdit?'fixed':''}">
			<thead><tr>
				<th v-for="i in th">{{i}}</th>
				<th>操作</th>
			</tr></thead>
			<tbody>
			<tr v-for="(i, index) in tbody_tr" v-show="i.visible">
				<td v-for="(j,key) in i" v-if="key!=='inEdit'&&key!=='date'&&key!=='visible'&&!i.inEdit">{{j}}</td>
				<td v-for="(j,key) in i" v-if="key!=='inEdit'&&key!=='date'&&key!=='visible'&&i.inEdit">
					<label>
						<input class="input" v-model="tbody_tr[index][key]">
					</label>
				</td>
				<td>{{i.date|dateFormat}}</td>
				<td class="operationTd">
					<div class="operation operationDiv" v-show="!i.inEdit" @click="editF(index)">编辑</div>
					<div class="operation operationDiv" v-show="i.inEdit" @click="saveF(index)">保存</div>
					<div class="operation operationDiv" @click="deleteBook(index)">删除</div>
				</td>
			</tr>
			</tbody>
		</table>
	</form>
	打印表单JSON：<br>{{tbody_tr}}<br>
</div>
<script src="js/apps/Vue图书管理系统.js"></script>
</body>
</html>